/*
 * This file is part of Avenge <https://adblockplus.org/>,
 * Copyright (C) 2006-present eyeo GmbH
 *
 * Avenge is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Avenge is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
 */

@import "./light.scss";
@import "./io-big-toggle.scss";

:root
{
  --height-adjusted-by: 35px;
  --border-width-thick-doubled: calc(2 * var(--border-width-thick));
  --border-width-thin-negative: calc(-1 * var(--border-width-thin));
  --margin-primary-half: calc(var(--margin-primary) / 2);
}

*,
*::before,
*::after
{
  box-sizing: border-box;
}

[hidden],
[aria-hidden="true"]
{
  display: none !important;
}

html,
body,
h1,
h2
{
  margin: 0;
}

body.nohtml #block-element,
body.disabled #stats-page,
body.ignore #page-status,
body.ignore #default-container .options
{
  display: none;
}

html,
body
{
  padding: 0;
  background-color: var(--background-color-primary);
}

body
{
  width: 340px;
  color: var(--color-primary);
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: var(--font-size-primary);
}

button
{
  border: 0;
  color: var(--color-link);
  background: none;
  cursor: pointer;
}

button[disabled]
{
  cursor: default;
}

header,
main > *,
footer
{
  padding: var(--padding-primary);
}

header
{
  padding-bottom: var(--padding-primary);
}

header .top,
#page-status > div:not(.refresh-info),
footer
{
  display: flex;
  flex-direction: row;
}

header h1
{
  color: var(--color-secondary);
  background-image: url(abp-logo.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  font-size: var(--font-size-big);
  flex-grow: 1;
}

html:not([dir="rtl"]) header h1
{
  padding-left: 30px;
  background-position: left center;
}

html[dir="rtl"] header h1
{
  padding-right: 30px;
  background-position: right center;
}

header .notification::before
{
  --border-top-color: var(--border-color-primary);
  display: block;
  overflow: hidden;
  height: var(--border-width-thick-doubled);
  margin-right: var(--border-width-thin-negative);
  margin-left: var(--border-width-thin-negative);
  border: 0;
  border-top: var(--border-width-thick)
    var(--border-style-primary)
    var(--border-top-color);
  border-radius: var(--border-radius-primary);
  content: "";
}

header .notification.critical::before
{
  --border-top-color: var(--color-critical);
}

header .notification.information::before
{
  --border-top-color: var(--color-info);
}

header .notification,
main .card
{
  border-width: var(--border-width-thin);
  border-style: var(--border-style-primary);
  border-color: var(--border-color-primary);
  border-radius: var(--border-radius-primary);
  box-shadow: var(--box-shadow-primary);
}

header .notification
{
  margin-top: var(--margin-primary);
  margin-bottom: var(--margin-primary-half);
  border-top: 0;
}

header .notification > div
{
  padding: var(--padding-primary);
}

header .notification h3[hidden] + p
{
  margin-top: 0;
}

header .notification h3
{
  margin: 0;
  color: var(--color-secondary);
  font-size: var(--font-size-primary);
}

header .notification h3::before
{
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  content: "";
}

html:not([dir="rtl"]) header .notification.critical h3,
html:not([dir="rtl"]) header .notification.information h3
{
  padding-left: 24px;
}

html:not([dir="rtl"]) header .notification.critical h3::before,
html:not([dir="rtl"]) header .notification.information h3::before
{
  margin-left: -24px;
}

html[dir="rtl"] header .notification.critical h3,
html[dir="rtl"] header .notification.information h3
{
  padding-right: 24px;
}

html[dir="rtl"] header .notification.critical h3::before,
html[dir="rtl"] header .notification.information h3::before
{
  margin-right: -24px;
}

header .notification.critical h3::before
{
  background-image: url(icons/critical.svg);
}

header .notification.information h3::before
{
  background-image: url(icons/info.svg);
}

header .notification hr
{
  height: var(--border-width-thin);
  border: 0;
  background: var(--border-color-primary);
}

header .notification button
{
  display: block;
  padding-right: 0;
  padding-left: 0;
  font-size: var(--font-size-primary);
}

header .notification button
{
  margin-top: var(--margin-primary-half);
}

#options
{
  min-width: var(--font-size-big);
  border: 0;
  opacity: 0.5;
  background-image: url(icons/options.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--font-size-big);
  transition: opacity 0.1s ease-in;
}

#options:hover
{
  opacity: 1;
}

.refresh-info
{
  display: block;
  overflow: hidden;
  padding: var(--margin-primary-half);
  border-width: var(--border-width-thin);
  border-style: var(--border-style-primary);
  border-color: var(--border-color-primary);
  border-radius: var(--border-radius-primary);
  font-size: var(--font-size-primary);
  transition: transform 0.3s ease-out;
  transform: scale3d(1, 1, 1) translateY(4px);
  will-change: transform;
}

.refresh-info[hidden]
{
  height: 0;
  padding: 0;
  border: 0;
  transform: scale3d(1, 0, 1) translateY(0);
}

#page-status
{
  height: var(--page-status-height, auto);
  transition: height 0.3s ease-out;
  will-change: height;
}

.refresh #page-status
{
  height: calc(var(--page-status-height) + var(--height-adjusted-by));
}

#page-status .details
{
  width: 240px;
}

#page-status io-big-toggle
{
  margin: var(--margin-primary-half);
}

body.disabled #page-status .details
{
  opacity: 0.5;
}

#blocking-domain
{
  overflow: hidden;
  margin: var(--margin-primary-half) 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

a,
a:hover,
a:visited,
a:active
{
  color: var(--color-link);
  text-decoration: none;
}

main h2
{
  color: var(--color-secondary);
  font-size: var(--font-size-medium);
}

#page-info
{
  overflow: hidden;
  height: var(--page-info-height, auto);
  background-color: var(--background-color-secondary);
  transition: height 0.3s ease-out;
  will-change: height;
}

#page-info #block-element-container,
#page-info.blocking #default-container
{
  display: none;
}

#page-info.blocking #block-element-container,
#page-info #default-container
{
  display: block;
}

.refresh #page-info
{
  height: calc(var(--page-info-height) - var(--height-adjusted-by));
}

#page-info > div
{
  transition: transform  0.3s ease-out;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}

.refresh #page-info > div
{
  opacity: 0.9;
  transform: scale3d(0.8, 0.8, 0.8) translateY(-30px);
  pointer-events: none;
  filter: blur(5px);
}

main .card
{
  margin-top: var(--margin-primary-half);
  padding: var(--padding-primary);
  background-color: var(--background-color-primary);
}

main .card strong
{
  color: var(--color-secondary);
}

main .options
{
  display: flex;
  padding-top: var(--padding-primary);
}

main .options button
{
  padding: var(--padding-secondary);
  border: 0;
  color: var(--color-primary);
  background-color: transparent;
  font-size: var(--font-size-small);
  text-align: center;
  transition: color 0.3s ease-in;
  flex-grow: 1;
}

main .options #block-element-cancel
{
  margin: auto;
  flex-grow: 0;
}

#block-element-cancel .block
{
  margin-right: var(--margin-primary);
  margin-left: var(--margin-primary);
}

html:not([dir="rtl"]) main .options button
{
  border-left: var(--border-width-thin)
    var(--border-style-primary)
    var(--border-color-primary);
}

html:not([dir="rtl"]) main .options button:last-child
{
  border-right: var(--border-width-thin)
    var(--border-style-primary)
    var(--border-color-primary);
}

html[dir="rtl"] main .options button
{
  border-right: var(--border-width-thin)
    var(--border-style-primary)
    var(--border-color-primary);
}

html[dir="rtl"] main .options button:last-child
{
  border-left: var(--border-width-thin)
    var(--border-style-primary)
    var(--border-color-primary);
}

main .options button .report::before,
main .options button .block::before
{
  display: inline-block;
  background-repeat: no-repeat;
  content: "";
}

html:not([dir="rtl"]) main .options button .report::before,
html:not([dir="rtl"]) main .options button .block::before
{
  margin-right: var(--margin-primary-half);
}

html[dir="rtl"] main .options button .report::before,
html[dir="rtl"] main .options button .block::before
{
  margin-left: var(--margin-primary-half);
}

main .options button .report::before
{
  width: 13px;
  height: 11px;
  background-image: url(icons/report-issue.svg?normal#normal);
  background-size: 13px 11px;
}

main .options button .block::before
{
  width: 12px;
  height: 12px;
  background-image: url(icons/block-element.svg?normal#normal);
  background-size: 12px 12px;
  transform: translateY(1);
}

main .options button[disabled]
{
  opacity: 0.5;
}

main .options button:not([disabled]):hover .report::before
{
  background-image: url(icons/report-issue.svg?hover#hover);
}

/* creates a gap between bold numbers and text (both rtl and ltr) */
#stats-page strong::after,
#stats-total strong::after
{
  display: inline-block;
  margin: 4px;
  content: "";
}

body:not(.disabled) main .options button:hover .block::before
{
  background-image: url(icons/block-element.svg?hover#hover);
}

body:not(.disabled) main .options button:hover,
body:not(.disabled) main .options button:focus
{
  color: var(--color-info);
}

main > *,
footer
{
  border-top: var(--border-width-thin)
    var(--border-style-primary)
    var(--border-color-primary);
}

#block-element-info
{
  text-align: center;
}

#block-element-info > strong
{
  display: block;
  margin-bottom: var(--margin-primary-half);
}

footer > span
{
  flex-grow: 1;
}

footer > button
{
  width: var(--font-size-primary);
  margin-right: var(--margin-primary-half);
  margin-left: var(--margin-primary-half);
  opacity: 0.5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.1s ease-in;
}

footer > button:hover
{
  opacity: 1;
}

footer > button.apple
{
  background-image: url(icons/apple.svg);
}

footer > button.android
{
  background-image: url(icons/android.svg);
}
